<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加表单内容</title>
    <style>
        table {
            text-align: center;
            border-collapse: collapse;
            font-size: 12px;
        }
        
        table {
            margin-top: 10px;
            width: 600px;
            border: 1px solid green;
            border-collapse: collapse;
        }
        
        thead tr th,
        tbody tr td {
            border: 1px solid green;
        }
        
        table thead {
            background: #9529e0;
        }
        
        table tbody {
            background: #ffbcc8;
        }
        
        th:nth-child(1),
        td:nth-child(1) {
            width: 113px;
        }
        
        th:nth-child(2),
        td:nth-child(2) {
            width: 485px;
        }
    </style>
</head>

<body>
    请输入姓名：<input type="text" name="names" id="names"> <br /> 请输入邮箱：
    <input type="email" name="email" id="email"><br />
    <button id="btn">添加</button><br />
    <table>
        <thead>
            <th>姓名</th>
            <th>邮箱</th>
        </thead>
    </table>
    <script>
        /*     用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：
                                                                                                                                                                                                                                                                                                      1）如果输入框内容有一项为空，弹出对话框‘请将数据填入完全 */
        //    获取输入框
        let inputs = $("input");
        //    获取文本框
        console.log(inputs)
        let atext_input = $("#names")[0];
        // 获取电子邮件框
        let email_input = $("#email")[0];
        // 获取添加按钮
        let btn = $("#btn")[0];
        // 获取table
        let index = 0;
        btn.onclick = function() {
            let tables = $("table")[0];

            if (atext_input.value == "" && email_input.value == "") {
                alert("请将数据填入完全");
                console.log("弹出" + index);
                // flag = false;
                return;
            } else {
                // 创建td
                let td1 = document.createElement("td");
                td1.innerHTML = atext_input.value;
                let td2 = document.createElement("td");
                td2.innerHTML = email_input.value;
                // 创建 tr
                let tr = document.createElement("tr");
                tr.appendChild(td1);
                tr.appendChild(td2);

                //创建 tbody
                let tbody = document.createElement("tbody");
                tbody.appendChild(tr);

                tables.appendChild(tbody);
                atext_input.value = "";
                email_input.value = "";
                console.log(index);
                index++;



            }

        }

        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>